<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/queryAndBlank.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script>
        $(function () {
            //获得当前登录的用户信息的id
            var userId = user.id;
            var type = 1;
            //定义变量表示要查询的收藏类型
            //默认当前页
            var currentPage = 1;
            //总页数
            var pages;
            //标记是否正在查询
            var loading = false;
            $("#travel").trigger("click");


            var travelArr = [];
            //定义查询的方法
            function query(type) {
                if (loading) {
                    //正在查询,则跳出
                    return;
                }
                loading = true;
                //存储游记的容器数组

                $.get(baseUrl + "/users/typies", {currentPage: currentPage, type: type}, function (data) {
                    console.log(data);

                    $.merge(travelArr, data.list);

                    //查询的是游记
                    if (type == 1) {
                        $("#pills-travel").html("");

                        //$("#pills-strategy").html("");
                        var temp = "";
                        $.each(travelArr, function (index, ele) {
                            temp += "<div>\n" +
                                "            <div class=\"container commend\">\n" +
                                "                <a href=\"/travelContent.html?id=" + ele.id + "\">\n" +
                                "                    <p>" + ele.title + "</p>\n" +
                                "                    <img width='60%' src=" + ele.coverUrl + ">\n" +
                                "                </a>\n" +
                                "            </div>\n" +
                                "            <hr>\n" +
                                "        </div>"
                        });
                        $("#pills-travel").append(temp);
                    }
                    //查询的是攻略
                    if (type == 2) {
                        //  $("#pills-travel").html("");
                        $("#pills-strategy").html("");
                        var temp = "";
                        $.each(travelArr, function (index, ele) {
                            temp += "<div>\n" +
                                "            <div class=\"container commend\">\n" +
                                "                <a href=\"/strategyDetails.html?id=" + ele.id + "\">\n" +
                                "                    <p>" + ele.title + "</p>\n" +
                                "                    <img width='60%' src=" + ele.coverUrl + ">\n" +
                                "                </a>\n" +
                                "            </div>\n" +
                                "            <hr>\n" +
                                "        </div>"
                        });
                        $("#pills-strategy").append(temp);

                    }
                    //查询的是日报
                    if (type == 3) {
                        $("#pills-newsPage").html("");
                        var temp = "";
                        $.each(travelArr, function (index, ele) {
                            temp += "<div>\n" +
                                "            <div class=\"container commend\">\n" +
                                "                <a href=\"/dailyContent.html?id=" + ele.id + "\">\n" +
                                "                    <p>" + ele.title + "</p>\n" +
                                "                    <img width='60%' src=" + ele.coverUrl + ">\n" +
                                "                </a>\n" +
                                "            </div>\n" +
                                "            <hr>\n" +
                                "        </div>"
                        })
                        $("#pills-newsPage").append(temp);
                    }
                    pages = data.pages;
                    currentPage++;
                    loading = false;
                });

            }

            //监听滚动事件
            $(window).scroll(function () {
                console.log("在滚动");
                //判断接近底部
                if ($(window).height() + $(document).scrollTop() + 50 >= $(document).height()) {
                    //如果是最后一页则不发送请求
                    if (currentPage <= pages) {
                        query(type);
                    } else {
                        //提示到达底部
                        $(document).dialog({
                            type: 'notice',
                            content: '<span class="info-text">我是有底线的!</span>',
                            autoClose: 2500
                        });
                    }
                }
            });

            //给每一个列表标签绑定点击事件
            $(".clickTab").click(function () {
                currentPage = 1;
                travelArr = [];
                //获得点击源的data-type
                type = $(this).data("type");
                query(type);
            });

            //默认查询收藏游记
            query(type);

        })


    </script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:window.history.go(-1)">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>我的收藏</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <li class="nav-item" style="width: 33%">
        <a role="button" id="travel" class="nav-link clickTab" data-type="1" data-toggle="pill"
           href="#pills-travel">
            <span class="travel">游记收藏</span>
        </a>
    </li>
    <li class="nav-item" style="width: 33%">
        <a role="button" id="strategy" class="nav-link clickTab" data-type="2" data-toggle="pill"
           href="#pills-strategy">
            <span class="strategy">攻略收藏</span>
        </a>
    </li>
    <li class="nav-item" style="width: 33%">
        <a role="button" id="newsPage" class="nav-link clickTab" data-type="3" data-toggle="pill"
           href="#pills-newsPage">
            <span class="newsPage">日报收藏</span>
        </a>
    </li>

</ul>
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade active show" id="pills-strategy">

    </div>
    <div class="tab-pane fade" id="pills-travel">

    </div>
    <div class="tab-pane fade" id="pills-newsPage">

    </div>
</div>
</body>


</html>
